<script lang="ts">
	import { goto } from "$app/navigation";
	import lazy from "$lib/lazy";

	export let item;
</script>

<div
	class="item"
	on:click={() => goto("/release?id=" + item.endpoint.browseId)}
>
	<div class="img">
		<img
			loading="lazy"
			on:error={(e) => {
				e.currentTarget.onerror = null;
				e.currentTarget.src =
					"";
			}}
			use:lazy={{ src: item.thumbnails[0].url }}
			src=""
			alt="thumbnail"
		/>
	</div>
	<div class="item-title">{item.title}</div>
</div>

<style lang="scss">
	.item {
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;

		justify-content: flex-start;

		cursor: pointer;
		border-radius: 0.4rem;
		padding: 0.5rem 0.4rem 0.4rem;
		position: relative;
		width: 100%;
		.img {
			width: 100%;
			margin-bottom: 0.5em;
		}
	}
	.item-title {
		display: inline;
		padding: 0.3rem 0.1rem;
		font-family: "CommissionerVariable";
		font-weight: 500;
		font-size: 1.1em;
		letter-spacing: -0.02em;
		margin-bottom: 0.5em;
	}
	@media screen and (min-width: 25em) and (max-width: 37em) {
		.item {
			max-width: 14rem;
		}
	}
	@media screen and (min-width: 37em) and (max-width: 48em) {
		.item {
			max-width: 13rem;
		}
	}
	@media screen and (min-width: 48em) {
		.item {
			max-width: 14rem;
		}
	}
</style>
